<style>
    /* th, td {
         white-space: nowrap;
     }

     div.dataTables_wrapper {
         width: 100%;
         margin: 0 auto;
     }*/

    .tabliv {
        display: none;
    }


    .tabliv > table th, .tabliv > table td {
        padding: 8px;
        border-bottom: 1px solid #555;
    }
</style>
<div class="container-fluid">
    <div class="wrapper">
        <div class="panel" id="nav">
            <div class="panel-heading"><h3 class="panel-title">亚马逊物流移除订单详情报告</h3></div>
            <div class="panel-body">
                <form id="form" action="__URL__/exportReport" method="POST">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="col-sm-12 col-md-3  add-space">
                                    <div class="input-group input-group-md">
                                        <input name="page" id="page" type="hidden"  />
                                        <span class="input-group-addon">帐号</span>
                                        <select class="chosen-select form-control" tabindex="-1" name="accountId"
                                                data-name-group="common">
                                            <option value="" class="empty-opt">-- 请选择 --</option>
                                            <volist name="accounts" id="vo">
                                                <option value="{$vo.id}">
                                                    {$vo.name}
                                                </option>
                                            </volist>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-3  add-space">
                                    <div class="input-group input-group-md">
                                        <span class="input-group-addon">SellerSKU</span>
                                        <input class="form-control " placeholder="请输入内容" name="sku"
                                               data-name-group="" type="text" value="">
                                    </div>
                                </div>
                                <div class="col-sm-12 col-md-4 add-space">
                                    <div class="input-group input-group-md">
                                        <span class="input-group-addon">移除请求时间</span>
                                        <input class="form-control form-date_1" type="text" name="removal_time_from" value="" style="cursor:pointer;" >
                                        <span class="input-group-addon"><span class="icon-calendar"></span></span>
                                        <input class="form-control form-date_1" type="text" name="removal_time_to" value="" style="cursor:pointer;" >
                                    </div>
                                </div>
                                <div class="col-md-2 add-space">
                                    <input id="select" class="btn btn-primary jsSearchBtn" type="button" value="搜索">
                                    <input id="download" class="btn btn-primary jsSearchBtn" type="submit" value="下载">
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
                <hr>
                <table class="table table-striped  table-hover" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>序号</th>
                        <th>帐号</th>
                        <th>SellerSKU</th>
                        <th>公司SKU</th>
                        <th>站点</th>
                        <th>移除数量</th>
                        <th>已完成转仓数量</th>
                        <th>转仓在途数量</th>
                        <th>请求时间</th>
                        <th>最后更新时间</th>
                    </tr>
                    </thead>
                    <tbody id="pageData">
                    </tbody>
                </table>
                <div id="pagecount"></div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('select.chosen-select').chosen({
            no_results_text:'没有找到',   // 当检索时没有找到匹配项时显示的提示文本
            disable_search_threshold: 2, // 2个以下的选择项则不显示检索框
            search_contains: true        // 从任意位置开始检索
        });
    });
</script>
<script type="text/javascript" charset="utf-8">
    $(function () {
        $('#page').val(1);

        getData();

        $('#pagecount').on('click','span a',function(){
            var rel = $(this).attr("rel");
            $('#page').val(rel);
            getData();
        });

        $("#select").click(function(){
            $('#page').val(1);
            getData();
        });
        $('.form-date_1').datetimepicker({
            lang:'ch',
            timepicker:false,
            format:'Y-m-d',
            formatDate:'Y-m-d'
        });
    });
    
    /**
     * 获取当页数据
     */
    function getData(){

        $.ajax({
            type: 'POST',
            url: '__URL__/getReport',
            data: $('#form').serialize(),
            dataType:'json',
            success:function(arr){
                total = arr.total; //总记录数

                pageSize = arr.pageSize; //每页显示条数
                curPage = arr.page; //当前页
                totalPage = arr.totalPage; //总页数
                var list = arr.reportDataLists;

                content = '';
                if(typeof(list) == "undefined"){
                    content = '';
                }
                else{
                    i=0;
                    $.each(list,function(index,array){ //遍历json数据列
                        if(array['skucnname'] == undefined) array['skucnname'] = '';
                        ++i;
                        content += "<tr>";
                        content += "<td>"+i+"</td>";
                        content += "<td>"+array['name']+"</td>";//账号名
                        content += "<td>"+array['sku']+"</td>";
                        content += "<td>"+array['private_sku']+"</td>";
                        content += "<td>"+array['site']+"</td>";
                        content += "<td>"+array['disposed_quantity']+"</td>";
                        content += "<td>"+array['shipped_quantity']+"</td>";
                        content += "<td>"+array['in_process_quantity']+"</td>";
                        content += "<td>"+array['request_date']+"</td>";
                        content += "<td>"+array['last_updated_date']+"</td>";
                        content += "</tr>";

                    });

                }
                $('#pageData').html(content);

            },
            complete:function(){ //生成分页条
                getPage();
            },
            error:function(){
                alert("数据加载失败");
            }
        });
    }

    /**
     * 分页展示
     */
    function getPage(){

        if(curPage>totalPage)curPage=totalPage;
        if(curPage<1)curPage=1;
        pageStr="<span class='span'>共"+total+"条</span><span class='span'>"+curPage+"/"+totalPage+"</span>"
        if(curPage==1){
            pageStr += "<span class='span'>首页</span><span class='span'>上一页</span>";
        }else{
            pageStr += "<span><a class='a' href='javascript:void(0)' rel='1'>首页</a></span>" +
                    "<span><a class='a' href='javascript:void(0)' rel='"+(curPage-1)+"'>上一页</a></span>"
        }
        if(curPage>=totalPage){
            pageStr += "<span class='span'>下一页</span><span class='span'>尾页</span>";
        }else{
            pageStr += "<span><a class='a' href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></span>" +
                    "<span><a class='a' href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></span>";
        }
        $("#pagecount").html(pageStr);
    }
</script>